<template>
  <div>
    <a-button type="primary" size="small" icon="plus" @click="addPostexecutor()">添加</a-button>
    <div v-for="(paramsObject, index) in postexecutorList" :key="index + postexecutorList.length">
      <div id="components-form-demo-advanced-search">
        <a-form class="ant-advanced-search-form" v-model="postexecutorList[index]">
          <a-row>
            <a-col :span="16">
              <a-form-model-item
                label="服务:"
                placeholder="请输入后端服务名称"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
              >
                <div>
                  <a-input v-model="postexecutorList[index]['bean']" @change="onChange(paramsObject['bean'])"></a-input>
                </div>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol">
                <div style="text-align: right">
                  <a-button type="primary" size="small" icon="delete" @click="deletePostexecutor(index)"></a-button>
                </div>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="16">
              <a-form-model-item label="属性:" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-select
                  mode="tags"
                  :size="sizeSelect"
                  placeholder="请选择服务所需参数"
                  :default-value="defaultValue[index]"
                  @change="handleChange($event, index)"
                >
                  <a-select-option v-for="item in allParamNameList" :key="item.key" :value="item.name">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { WF_Object_Params } from '@/enumeration/Wf_NodeBtn'

export default {
  name: 'Wf_NodeBtnPostexecutors',
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    postexecutors: {
      type: String,
    },
  },
  data() {
    //这里存放数据
    return {
      labelCol: { span: 4 }, // label宽
      wrapperCol: { span: 20 }, // 组件宽
      sizeSelect: 'default', //大小
      allParamNameList: [], //参数名
      defaultValue: [], //默认选中
      postexecutorList: [], //服务数组
    }
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {
    postexecutors(newValue, oldValue) {
      this.postexecutorList = []
      const item = JSON.parse(this.postexecutors)
      if (item && item.length > 0) {
        this.postexecutorList = item
      }
      this.setDefaultValue(this.postexecutorList)
    },
  },
  //方法集合
  methods: {
    onChange() {
      this.changFather()
    },
    deletePostexecutor(index) {
      this.postexecutorList.splice(index, 1)
      this.setDefaultValue(this.postexecutorList)
      this.changFather()
    },
    handleChange(values, index) {
      const postexecutorByNames = this.getPostexecutorByNames(values)
      postexecutorByNames['bean'] = this.postexecutorList[index]['bean']
      this.postexecutorList[index] = postexecutorByNames
      this.changFather()
    },
    //添加服务
    addPostexecutor() {
      this.postexecutorList.push({ bean: '' })
      this.setDefaultValue(this.postexecutorList)
      console.log(this.postexecutorList)
    },
    //设置默认选中的节点
    setDefaultValue(pList) {
      pList.forEach((postexecutor, index) => {
        //属性 key
        const keysWithoutBean = Object.keys(postexecutor).filter((key) => key !== 'bean')
        const allParamNameList = []
        this.allParamNameList.forEach((item) => {
          keysWithoutBean.forEach((key) => {
            if (item.key == key) {
              allParamNameList.push(item.name)
            }
          })
        })
        this.defaultValue[index] = allParamNameList
      })
    },
    //根据名字name集合获取结果
    getPostexecutorByNames(nameList) {
      const postexecutor = {}
      for (const name of nameList) {
        for (const param of this.allParamNameList) {
          if (param.name === name) {
            const key = param.key
            postexecutor[key] = param.value
            break
          }
        }
      }
      return postexecutor
    },
    //参数发生变化通知父节点
    changFather() {
      const strs = JSON.stringify(this.postexecutorList)
      this.$emit('changePostextcutor', strs)
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    console.log('121212')
    this.postexecutorList = []
    const item = JSON.parse(this.postexecutors)
    if (item && item.length > 0) {
      this.postexecutorList = item
    }
    this.allParamNameList = WF_Object_Params
    this.setDefaultValue(this.postexecutorList)
  },
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共 css 类
.ant-advanced-search-form {
  padding: 24px;
  background: #fbfbfb;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}

#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
</style>